<template>
  <div class="scoreMain">
    <div class="noData"
         v-if="noData">
      <img :src=noDataPng
           alt="">
    </div>
    <div v-if="rankArray.length">
      <div class="scoreBanner">
        <img :src=reportpng
             alt="">
      </div>
      <div class="rank">
        <div class="rankTips">
          <span>您的最高分：{{rankArray[0].grade}}</span>
        </div>
        <div class="rankItem">
          <div class="rankTop">
            <p class="rankplace">
              名次
            </p>
            <p class="rankName">
              姓名
            </p>
            <p class="rankScore">
              得分
            </p>
            <p class="rankTime">
              用时
            </p>
          </div>
          <div :class='{"rankTop1":index===0,"rankTop2":index===1,"rankTop3":index===2}'
               class="rankList"
               v-for="(item,index) in rankArray"
               :key="index">
            <div class="rankLeft">
              <div class="rankplace">
                <span>{{index+1}}</span>
              </div>
            </div>
            <div class="rankRight">
              <div class="rankName ">
                <p class="p1">{{item.name}}</p>
                <p class="p2">{{item.time}}</p>
              </div>
              <div class="rankScore">
                <p>{{item.grade}}</p>
              </div>
              <div class="rankTime">
                <p>{{item.long_time}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  <script>
import { formatTime } from '@/utils'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      rankArray: [],
      noDataPng: 'https://dati.co-links.com/static/xadmin/images/noData.png',
      reportpng: 'https://dati.co-links.com/static/xadmin/images/scoreReport.jpg',
      noData: false
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  },
  methods: {
    init () {
      let that = this
      console.log(that.userInfo)
      wx.showLoading({
        title: '加载中'
      })
      that.$http.post('https://dati.co-links.com/operat/get_grade/', {
        userid: that.userInfo.userid || wx.getStorageSync('user_id')
      }).then((res) => {
        if (res.data.data.length === 0) {
          that.noData = true
        }
        that.rankArray = res.data.data
        wx.hideLoading()
        that.rankArray.sort(function (a, b) {
          return b.grade - a.grade
        })
        that.rankArray = that.rankArray.filter((val, index) => {
          return index <= 9
        })
        for (var i in that.rankArray) {
          that.rankArray[i].time = formatTime(that.rankArray[i].time)
        }
      })
    }
  },
  mounted () {
    this.init()
  }
}
</script>
 <style lang="stylus">
 page {
   width: 100%;
   height: 100%;
 }

 .scoreBanner {
   height: 320rpx;

   img {
     width: 100%;
     height: 320rpx;
   }
 }

 .rankItem {
   padding: 0 32rpx;
   background: white;
   padding-bottom: 50rpx;
 }

 .rankTips {
   height: 70rpx;
   line-height: 70rpx;
   background: #f7f7f7;
   color: #333333;
   font-size: 32rpx;
   padding: 0 32rpx;
   text-align: center;
 }

 .rankTop {
   font-size: 30rpx;
   color: #000000;
   display: -webkit-box;
   display: -webkit-flex;
   display: flex;
   -webkit-box-align: center;
   -webkit-align-items: center;
   align-items: center;
   height: 66rpx;
   line-height: 66rpx;

   .rankplace {
     width: 120rpx;
     height: 65rpx;
     line-height: 65rpx;
   }
 }

 .rankName {
   width: 310rpx;
 }

 .rankScore, .rankTime {
   width: 120rpx;
   text-align: center;
   margin-top: -10rpx;
 }

 .rankList {
   display: -webkit-box;
   display: -webkit-flex;
   display: flex;
   -webkit-box-align: center;
   -webkit-align-items: center;
   align-items: center;
   height: 136rpx;

   .rankLeft {
     width: 120rpx;
     margin-top: -30rpx;

     .rankplace {
       span {
         position: relative;
         display: inline-block;
         width: 46rpx;
         height: 40rpx;
         text-align: center;
         line-height: 40rpx;
         color: #999999;
         font-size: 32rpx;
       }
     }
   }

   .rankRight {
     -webkit-box-flex: 1;
     -webkit-flex: 1;
     flex: 1;
     display: -webkit-box;
     display: -webkit-flex;
     display: flex;
     -webkit-box-align: center;
     -webkit-align-items: center;
     align-items: center;
     font-size: 28rpx;
     color: #333333;
     height: 100%;
     border-bottom: 1px solid #e6e6e6;

     .rankName {
       .p1 {
         font-size: 32rpx;
         color: #000000;
         font-weight: bold;
       }

       .p2 {
         font-size: 28rpx;
         color: #000000;
       }
     }

     .rankScore {
       color: #00cc76;
       font-weight: bold;
       font-size: 32rpx;
       margin-top: -10rpx;
       text-align: center;
     }
   }
 }

 .rankTop1, .rankTop2, .rankTop3 {
   .rankplace {
     span {
       position: relative;
       display: inline-block;
       width: 46rpx;
       height: 40rpx;
       text-align: center;
       line-height: 40rpx;
       background: #f2b565;
       color: #cd9746;
       font-size: 32rpx;

       &:before {
         position: absolute;
         content: '';
         top: 40rpx;
         left: 0;
         margin-top: 0rpx;
         right: 0rpx;
         border-style: solid dashed dashed dashed;
         border-width: 23rpx;
         border-color: #f2b565 transparent transparent transparent;
         width: 0;
         height: 0;
       }
     }
   }
 }

 .rankTop2 {
   .rankplace {
     span {
       color: #aab8c5;
       background: #d9dce3;

       &:before {
         border-color: #d9dce3 transparent transparent transparent;
       }
     }
   }
 }

 .rankTop3 {
   .rankplace {
     span {
       color: #aa7a64;
       background: #daa488;

       &:before {
         border-color: #daa488 transparent transparent transparent;
       }
     }
   }
 }
</style>

